<template>
  <view style="overflow: hidden">
    <view class="hrader">
      <image
        src="../../../static/bback.png"
        class="goback"
        @click="gobackClick"
        mode=""
      />
      {{ title }}
    </view>
    <view class="content">
      <!-- 祈福详情 -->
      <view class="sec1" v-if="this.type == 0">
        <view class="row">
          <view class="lef">您的姓名</view>
          <view class="rig">{{ sec1.username }}</view>
        </view>
        <view class="row">
          <view class="lef">年龄</view>
          <view class="rig">{{ sec1.age }}</view>
        </view>
        <view class="row">
          <view class="lef">性别</view>
          <view class="rig">{{ sec1.sex_str }}</view>
        </view>
        <view class="row">
          <view class="lef">贡品</view>
          <view class="rig">{{ sec1.type_str }}</view>
        </view>
        <view class="row">
          <view class="lef">祈愿主题</view>
          <view class="rig">{{ sec1.title }}</view>
        </view>
        <view class="row">
          <view class="lef">祈愿内容</view>
          <view class="rig">{{ sec1.content }}</view>
        </view>
        <view class="row">
          <view class="lef">祈愿金额</view>
          <view class="rig">{{ sec1.money }}</view>
        </view>
        <view class="row">
          <view class="lef">付款时间</view>
          <view class="rig">{{ (sec1.createtime || "") | formatDate }}</view>
        </view>
      </view>
      <!-- 供奉详情 -->
      <view class="sec2" v-if="this.type == 2">
        <view class="row">
          <view class="lef">联系人</view>
          <view class="rig">{{ sec2.contacts_name }}</view>
        </view>
        <view class="row">
          <view class="lef">联系方式</view>
          <view class="rig">{{ sec2.contacts_phone }}</view>
        </view>
        <view class="row">
          <view class="lef">供奉金额</view>
          <view class="rig">{{ sec2.offering_amount }}</view>
        </view>
        <view class="row">
          <view class="lef">留言内容</view>
          <view class="rig">{{ sec2.remark }}</view>
        </view>
        <view class="row">
          <view class="lef">付款时间</view>
          <view class="rig">{{ (sec2.createtime || "") | formatDate }}</view>
        </view>
      </view>
      <!-- 开光详情 -->
      <view class="sec3" v-if="this.type == 3">
        <view class="row">
          <view class="lef">联系人</view>
          <view class="rig">{{ sec3.contacts_name }}</view>
        </view>
        <view class="row">
          <view class="lef">联系方式</view>
          <view class="rig">{{ sec3.contacts_phone }}</view>
        </view>
        <view class="row">
          <view class="lef">开光金额</view>
          <view class="rig">{{ sec3.money }}</view>
        </view>
        <view class="row">
          <view class="lef">留言内容</view>
          <view class="rig">{{ sec3.remark }}</view>
        </view>
        <view class="row">
          <view class="lef">付款时间</view>
          <view class="rig">{{ (sec3.createtime || "") | formatDate }}</view>
        </view>
        <view class="row">
          <view class="lef">图片</view>
          <image
            v-if="sec3.images"
            class="imgad"
            @click="previewImage(0)"
            :src="$IMG_URL + sec3.images"
            mode="aspectFill"
          />
          <view class="add" v-else>+</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      id: "",
      type: "",
      sec1: {},
      sec2: {},
      sec3: {},
    };
  },
  onLoad(e) {
    this.id = e.id;
    this.type = e.type;
    if (this.type == 0) {
      this.title = "祈福详情";
      this.buddhistPrayDetail();
    } else if (this.type == 2) {
      this.offeringDetail();
      this.title = "供奉详情";
    } else if (this.type == 3) {
      this.kaiGuangDetail();
      this.title = "开光详情";
    }
  },
  methods: {
    gobackClick() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 获取祈福详情
    async buddhistPrayDetail() {
      const res = await this.$myRequest({
        url: "pray/buddhistPrayDetail",
        method: "POST",
        data: {
          id: this.id,
        },
      });
      if (res.data.code == 1) {
        this.sec1 = res.data.data;
      }
    },
    // 获取供奉详情
    async offeringDetail() {
      const res = await this.$myRequest({
        url: "pray/offeringDetail",
        method: "POST",
        data: {
          id: this.id,
        },
      });
      if (res.data.code == 1) {
        this.sec2 = res.data.data;
      }
    },
    // 获取开光详情
    async kaiGuangDetail() {
      const res = await this.$myRequest({
        url: "pray/kaiGuangDetail",
        method: "POST",
        data: {
          id: this.id,
        },
      });
      if (res.data.code == 1) {
        this.sec3 = res.data.data;
      }
    },
    // 预览图片
    previewImage(eq) {
      let getUrl = [];
      getUrl.push(this.$IMG_URL + this.sec3.images);
      uni.previewImage({
        current: eq,
        urls: getUrl,
      });
    },
  },
};
</script>

<style lang="scss">
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  border-bottom: 20rpx solid #eee;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
}
page {
  width: 750rpx;
  background-color: #fff;
  height: 100vh;
  position: relative;
  .content {
    margin-top: 110rpx;
    overflow: hidden;
    width: 100%;
    min-height: 250rpx;
    box-sizing: border-box;
    padding: 30rpx;
    background: #fff;
    .sec1,
    .sec2,
    .sec3 {
      .row {
        display: flex;
        align-items: flex-start;
        margin-bottom: 30rpx;
        .lef {
          display: block;
          width: 120rpx;
          white-space: nowrap;
          text-align-last: justify;
          font-size: 30rpx;
          font-weight: normal;
          color: #999999;
          margin-right: 50rpx;
        }
        .rig {
          font-size: 30rpx;
          color: #333333;
        }
        .add {
          width: 150rpx;
          height: 150rpx;
          color: #646363;
          text-align: center;
          line-height: 150rpx;
          font-size: 80rpx;
          font-weight: bold;
          border: 5rpx dashed #bbbaba;
        }
        .imgad {
          display: block;
          // max-width: 50%;
          max-height: 100%;
        }
      }
      .row:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
